<template>
  <div>
    <!-- v-model="value"
      :value="value"
      @input="value = $event" -->
    <el-cascader
      :value="value"
      :options="departmentList"
      :props="props"
      clearable
      @change="handleChange"
    />
  </div>
</template>

<script>
import { departmentRequest } from '@/api/department'
import { transfromListToTree } from '@/utils'
// 工作里面有没有封装过组件？
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      departmentList: [],
      // 下面这两个属性就是说，我们给的对象数组里面，每一个行显示什么文字，以及选中以后js里面的值
      // 默认使用对象的字段是 label 和value两个属性，
      // 下面的属性官网没有dmeo，靠经验去写
      props: {
        label: 'name',
        value: 'id' // 选中以后js里面的值 部门id
      }
    }
  },
  created() {
    this.department()
  },
  methods: {
    handleChange(value) {
      console.log(value)
      // 我们选择了以后，只需要将这个级联选择器选择的数组 最后一位 发给父组件使用即可
      if (value.length > 0) {
        this.$emit('input', value[value.length - 1])
      } else {
        this.$emit('input', 0)
      }
    },
    async department() {
      const res = await departmentRequest()
      this.departmentList = transfromListToTree(res.data, 0)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-cascader {
  width: 100%;
}
</style>
